<template>
  <div class="st-wrapper">
    <div v-for="(item,index) in fixData" :key="index" class="st-item" @click="clickItem(index)">
      <img :src="item.img" class="st-img" />
      <div class="st-text">{{item.text}}</div>
    </div>
  </div>
</template>
<script>

import contactimg01 from './contactimg01.png'
import contactimg02 from './contactimg02.png'
import contactimg03 from './contactimg03.png'
// import contactimg04 from './contactimg04.png'
export default {
  data() {
    return {
      fixData: [
        { img: contactimg01, text: "在线咨询" },
        { img: contactimg02, text: "企业定制" },
        { img: contactimg03, text: "考试预约" },
        { img: contactimg03, text: "回到顶部" }
      ]
    };
  },
  methods: {
    clickItem(index) {
      if (index == 3) {
        window.scroll(0, 0);
      }
    }
  }
};
</script>
<style>
.st-wrapper {
  position: fixed;
  right: 0;
  top: 150px;
  background-color: #1b1b1b;
  overflow: hidden;
}
.st-wrapper .st-item {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #da0800;
  margin-bottom: 1px;
}
.st-wrapper .st-item:hover {
  background-color: #1b1b1b;
  cursor: pointer;
}
.st-wrapper .st-img {
  width: 20px;
  height: 20px;
}
.st-wrapper .st-text {
  font-family: NotoSansHans-Regular;
  font-size: 12px;
  color: #c8c8c8;
}
</style>